import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  // 在函数体中直接调用会陷入死循环
  // 因为执行setState的时候组件还在渲染中，而setState会触发组件的重新渲染，就会陷入死循环。
  // setCount(1);

  // useEffect() 是一个钩子函数，需要一个函数作为参数
  // 这个参数的函数，将会在组件渲染完毕后执行，就解决的死循环的问题

  /*
   * 在useEffect()可以传递第二个参数
   *     第二个参数是一个数组，在数组总可以指定Effect的依赖项
   *     指定后，只有当依赖项发生变化时，Effect才会被触发
   *     通常会将Effect中使用的所有的局部变量设置为依赖项
   *
   * */

  useEffect(() => {
    setCount(1);
    return () => {
      // 在Effect的回调函数中，可以指定一个函数作为返回值
      // 这个函数可以称其为清理函数，它会在下次Effect执行功前调用
      // 可以在这个函数中，做一些工作来清除上次Effect执行所带来的的影响
    };
  }, [count]);

  return (
    <div className="App">
      {count}
      <button>修改count</button>
    </div>
  );
}

export default App;
